import 'package:discuzq/utils/global.dart';
import 'package:flutter/material.dart';

Decoration myBoxDec(animation, {isCircle = false}) {
  return BoxDecoration(
    shape: isCircle ? BoxShape.circle : BoxShape.rectangle,
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        const Color(0xfff6f7f9),
        const Color(0xffe9ebee),
        const Color(0xfff6f7f9),
        // Color(0xfff6f7f9),
      ],
      stops: [
        // animation.value * 0.1,
        animation.value - 1,
        animation.value,
        animation.value + 1,
        // animation.value + 5,
        // 1.0,
      ],
    ),
  );
}

class PKCardSkeleton extends StatefulWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  const PKCardSkeleton(
      {this.isCircularImage = true, this.isBottomLinesActive = true});
  @override
  _PKCardSkeletonState createState() => _PKCardSkeletonState();
}

class _PKCardSkeletonState extends State<PKCardSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: const BorderRadius.all(Radius.circular(3))),
          padding: const EdgeInsets.all(10),
          margin: const EdgeInsets.only(left: 5, right: 5, top: 10),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: width * 0.13,
                    width: width * 0.13,
                    decoration:
                        myBoxDec(animation, isCircle: widget.isCircularImage),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  Container(
                    height: width * 0.13,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          height: height * 0.008,
                          width: width * 0.3,
                          decoration: myBoxDec(animation),
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.2,
                          decoration: myBoxDec(animation),
                        ),
                      ],
                    ),
                  )
                ],
              ),
              widget.isBottomLinesActive
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        const SizedBox(
                          height: 20,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.7,
                          decoration: myBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.8,
                          decoration: myBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.5,
                          decoration: myBoxDec(animation),
                        ),
                      ],
                    )
                  : const Offstage()
            ],
          ),
        );
      },
    );
  }
}

Decoration myDarkBoxDec(animation, {isCircle = false}) {
  return BoxDecoration(
    shape: isCircle ? BoxShape.circle : BoxShape.rectangle,
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Global.scaffoldBackgroundColorDark,
        Global.scaffoldBackgroundColorDark.withOpacity(.32),
        Global.scaffoldBackgroundColorDark.withOpacity(.78),
        // Color(0xfff6f7f9),
      ],
      stops: [
        // animation.value * 0.1,
        animation.value - 1,
        animation.value,
        animation.value + 1,
        // animation.value + 5,
        // 1.0,
      ],
    ),
  );
}

class PKDarkCardSkeleton extends StatefulWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  const PKDarkCardSkeleton(
      {this.isCircularImage = true, this.isBottomLinesActive = true});
  @override
  _PKDarkCardSkeletonState createState() => _PKDarkCardSkeletonState();
}

class _PKDarkCardSkeletonState extends State<PKDarkCardSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          padding: const EdgeInsets.all(10),
          margin: const EdgeInsets.only(left: 5, right: 5, top: 10),
          decoration: const BoxDecoration(
              color: Global.backgroundColorDark,
              borderRadius: const BorderRadius.all(Radius.circular(3))),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Container(
                    height: width * 0.13,
                    width: width * 0.13,
                    decoration: myDarkBoxDec(animation,
                        isCircle: widget.isCircularImage),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  Container(
                    height: width * 0.13,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          height: height * 0.008,
                          width: width * 0.3,
                          decoration: myDarkBoxDec(animation),
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.2,
                          decoration: myDarkBoxDec(animation),
                        ),
                      ],
                    ),
                  )
                ],
              ),
              widget.isBottomLinesActive
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        const SizedBox(
                          height: 20,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.7,
                          decoration: myDarkBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.8,
                          decoration: myDarkBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.5,
                          decoration: myDarkBoxDec(animation),
                        ),
                      ],
                    )
                  : const Offstage()
            ],
          ),
        );
      },
    );
  }
}

class PKCardListSkeleton extends StatelessWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  final int length;
  PKCardListSkeleton({
    this.isCircularImage = true,
    this.length = 10,
    this.isBottomLinesActive = true,
  });

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: length,
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (BuildContext context, int index) {
        return PKCardSkeleton(
          isCircularImage: isCircularImage,
          isBottomLinesActive: isBottomLinesActive,
        );
      },
    );
  }
}

class PKDarkCardListSkeleton extends StatelessWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  final int length;
  PKDarkCardListSkeleton({
    this.isCircularImage = true,
    this.length = 10,
    this.isBottomLinesActive = true,
  });

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: length,
      physics: const NeverScrollableScrollPhysics(),
      itemBuilder: (BuildContext context, int index) {
        return PKDarkCardSkeleton(
          isCircularImage: isCircularImage,
          isBottomLinesActive: isBottomLinesActive,
        );
      },
    );
  }
}

class PKCardProfileSkeleton extends StatefulWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  const PKCardProfileSkeleton(
      {this.isCircularImage = true, this.isBottomLinesActive = true});
  @override
  _PKCardProfileSkeletonState createState() => _PKCardProfileSkeletonState();
}

class _PKCardProfileSkeletonState extends State<PKCardProfileSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          color: Colors.white,
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: width * 0.25,
                width: width * 0.25,
                decoration:
                    myBoxDec(animation, isCircle: widget.isCircularImage),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: List.generate(
                    4,
                    (i) => Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          height: width * 0.13,
                          width: width * 0.13,
                          decoration: myBoxDec(animation,
                              isCircle: widget.isCircularImage),
                        ),
                        const SizedBox(
                          width: 20,
                        ),
                        Container(
                          height: width * 0.13,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                height: height * 0.008,
                                width: width * 0.3,
                                decoration: myBoxDec(animation),
                              ),
                              Container(
                                height: height * 0.007,
                                width: width * 0.2,
                                decoration: myBoxDec(animation),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ).toList(),
                ),
              ),
              widget.isBottomLinesActive
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const SizedBox(
                          height: 20,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.7,
                          decoration: myBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.8,
                          decoration: myBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.5,
                          decoration: myBoxDec(animation),
                        ),
                      ],
                    )
                  : const Offstage()
            ],
          ),
        );
      },
    );
  }
}

class PKDarkCardProfileSkeleton extends StatefulWidget {
  final bool isCircularImage;
  final bool isBottomLinesActive;
  const PKDarkCardProfileSkeleton(
      {this.isCircularImage = true, this.isBottomLinesActive = true});
  @override
  _PKDarkCardProfileSkeletonState createState() =>
      _PKDarkCardProfileSkeletonState();
}

class _PKDarkCardProfileSkeletonState extends State<PKDarkCardProfileSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
          color: Colors.grey[800],
          padding: const EdgeInsets.all(10),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: width * 0.25,
                width: width * 0.25,
                decoration:
                    myDarkBoxDec(animation, isCircle: widget.isCircularImage),
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: List.generate(
                    4,
                    (i) => Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          height: width * 0.13,
                          width: width * 0.13,
                          decoration: myDarkBoxDec(animation,
                              isCircle: widget.isCircularImage),
                        ),
                        const SizedBox(
                          width: 20,
                        ),
                        Container(
                          height: width * 0.13,
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Container(
                                height: height * 0.008,
                                width: width * 0.3,
                                decoration: myDarkBoxDec(animation),
                              ),
                              Container(
                                height: height * 0.007,
                                width: width * 0.2,
                                decoration: myDarkBoxDec(animation),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ).toList(),
                ),
              ),
              widget.isBottomLinesActive
                  ? Column(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        const SizedBox(
                          height: 20,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.7,
                          decoration: myDarkBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.8,
                          decoration: myDarkBoxDec(animation),
                        ),
                        const SizedBox(
                          height: 10,
                        ),
                        Container(
                          height: height * 0.007,
                          width: width * 0.5,
                          decoration: myDarkBoxDec(animation),
                        ),
                      ],
                    )
                  : const Offstage()
            ],
          ),
        );
      },
    );
  }
}

class PKCardPageSkeleton extends StatefulWidget {
  final int totalLines;
  const PKCardPageSkeleton({this.totalLines = 5});
  @override
  _PKCardPageSkeletonState createState() => _PKCardPageSkeletonState();
}

class _PKCardPageSkeletonState extends State<PKCardPageSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
            color: Colors.white,
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(
                  widget.totalLines,
                  (i) => Column(
                        children: <Widget>[
                          Container(
                            height: height * 0.007,
                            width: width * 0.7,
                            decoration: myBoxDec(animation),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: height * 0.007,
                            width: width * 0.8,
                            decoration: myBoxDec(animation),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: height * 0.007,
                            width: width * 0.5,
                            decoration: myBoxDec(animation),
                          ),
                        ],
                      )).toList(),
            ));
      },
    );
  }
}

class PKDarkCardPageSkeleton extends StatefulWidget {
  final int totalLines;
  const PKDarkCardPageSkeleton({this.totalLines = 5});
  @override
  _PKDarkCardPageSkeletonState createState() => _PKDarkCardPageSkeletonState();
}

class _PKDarkCardPageSkeletonState extends State<PKDarkCardPageSkeleton>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );

    animation = Tween<double>(begin: -1.0, end: 2.0).animate(
        CurvedAnimation(curve: Curves.easeInOutSine, parent: _controller));

    animation.addStatusListener((status) {
      if (status == AnimationStatus.completed ||
          status == AnimationStatus.dismissed) {
        _controller.repeat();
      } else if (status == AnimationStatus.dismissed) {
        _controller.forward();
      }
    });
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var width = MediaQuery.of(context).size.width;
    var height = MediaQuery.of(context).size.height;
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return Container(
            color: Colors.grey[800],
            padding: const EdgeInsets.all(10),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: List.generate(
                  widget.totalLines,
                  (i) => Column(
                        children: <Widget>[
                          Container(
                            height: height * 0.007,
                            width: width * 0.7,
                            decoration: myDarkBoxDec(animation),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: height * 0.007,
                            width: width * 0.8,
                            decoration: myDarkBoxDec(animation),
                          ),
                          const SizedBox(
                            height: 10,
                          ),
                          Container(
                            height: height * 0.007,
                            width: width * 0.5,
                            decoration: myDarkBoxDec(animation),
                          ),
                        ],
                      )).toList(),
            ));
      },
    );
  }
}
